<template>
	<view class="add">
		<view class="form">
			<view class="form-item">
				<view class="label">持卡人</view>
				<view class="value">
					<input v-model="queryForm.name" type="text" placeholder="请输入持卡人姓名" placeholder-class="place">
				</view>
			</view>
			<view class="form-item">
				<view class="label">身份证号</view>
				<view class="value">
					<input v-model="queryForm.identityCard" type="idcard" placeholder="请输入身份证号"
						placeholder-class="place">
				</view>
			</view>
			<view class="form-item">
				<view class="label">卡号</view>
				<view class="value">
					<input v-model="queryForm.bankCard" type="number" placeholder="请输入卡号" placeholder-class="place">
				</view>
			</view>
			<view class="form-item">
				<view class="label">开户行</view>
				<view class="value">
					<input v-model="queryForm.openingBank" type="text" placeholder="请输入开户行" placeholder-class="place">
				</view>
			</view>
		</view>
		<view class="submit">
			<button @click="handSubmit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		doEditBank
	} from '@/apis/bank.js'
	const {
		proxy
	} = getCurrentInstance();
	const $back = inject('$back')
	let loading = false
	const queryForm = ref({
		bankCard: '',
		identityCard: '',
		name: '',
		openingBank: '',
	})

	const handSubmit = async () => {
		const params = uni.$uv.deepClone(queryForm.value)
		if (!params.name) {
			uni.$uv.toast('请输入姓名')
			return
		}
		if (!params.identityCard) {
			uni.$uv.toast('请输入身份证号')
			return
		}
		if (!params.bankCard) {
			uni.$uv.toast('请输入卡号')
			return
		}
		if (!params.openingBank) {
			uni.$uv.toast('请输入开户行')
			return
		}
		if (loading) return
		loading = true
		try {
			const data = await doEditBank(params)
			const eventChannel = proxy.getOpenerEventChannel()
			eventChannel.emit('successEvent', params);
			uni.$uv.toast(params?.id ? '编辑成功' : '添加成功')
			setTimeout(() => {
				$back()
			}, 500)
		} catch (e) {
			//TODO handle the exception
			loading = false
		}
	}

	onLoad(() => {
		const eventChannel = proxy.getOpenerEventChannel()
		eventChannel.on('editData', (data) => {
			queryForm.value = data
		})
	})
</script>

<style lang="scss" scoped>
	.add {
		min-height: 100vh;
		background-color: #fff;

		.header {
			display: flex;
			flex-direction: column;
			position: fixed;
			top: 0;
			width: 750rpx;
			z-index: 5;
			padding-bottom: 30rpx;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 750rpx;
			}


			&-main {
				flex: 1;
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				position: relative;
				z-index: 2;

				.back {
					image {
						width: 18rpx;
						height: 33rpx;
					}
				}

				.title {
					flex: 1;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}

		.form {
			padding: 32rpx;

			&-item {
				display: flex;
				padding: 30rpx 0;

				.label {
					width: 200rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.value {
					flex: 1;

					input {
						width: 100%;
						text-align: right;
					}

					.place {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999;
					}
				}
			}
		}


		.submit {
			margin-top: 66rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			button {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				width: 694rpx;
				height: 88rpx;
				background: #FFC434;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					border: none;
				}
			}
		}
	}
</style>